<template>
  <div v-if="showDoc" ref="docRef" class="doc-content"></div>
</template>

<script setup>
import * as docx from "docx-preview";
import { ref } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";

const docRef = ref();
const showDoc = ref(false);

const open = async (url) => {
  try {
    showDoc.value = true;
    const response = await axios.get(url, { responseType: 'arraybuffer' });

    docx.renderAsync(response.data, docRef.value);
  } catch (error) {
    console.error("解析失败:", error);
    ElMessage.error("文件解析失败");
  }
};

const close = () => {
  showDoc.value = false; // 隐藏文档
}


defineExpose({
  open,
  close
})
</script>

<style scoped>
:deep .docx-wrapper {
  background: #fff;
  padding: 10px 0px;
}

:deep .docx-wrapper>section.docx {
  margin-bottom: 0px;
}
</style>